<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { route } from '@/uni_modules/uview-plus'
	import { returnList, cancelOrder } from '@/package_saleman/api/List'
	import { useNotify } from '@/hooks/web/useNotify/index.js'

	// 消息弹窗
	const NotifyRef = ref<any>(null)
	const { showNotify } = useNotify(NotifyRef)

	const paging = ref()
	const useCURD = () => {
		const dataList = ref([])

		const getList = async (page : number, limit : number) => {
			const params = { page, limit, ...data.value, order_type: 2, type: 1 }
			try {
				const res = await returnList(params)
				paging.value?.complete([...res.data.data])
			} catch (err) {
				paging.value?.complete(false)
			}
		}

		const searchAction = () => {
			paging.value?.reload()
		}

		return {
			dataList,
			getList,
			searchAction,

		}
	}
	const { dataList, getList, searchAction } = useCURD()
	// 取消订单
	const cancellation = async (id : number) => {
		try {
			const val = await cancelOrder({ id: id, field: 'status', value: '5' })
			showNotify({
				type: 'success',
				message: val.msg
			})
			paging.value?.reload()
		} catch (err) {
			showNotify({
				type: 'error',
				message: err.msg
			})
		} finally {
		}
	}
	// 跳转详情
	const toStoreDetail = (item : any) => {
		route({
			url: 'package_saleman/pages/Returnorder/detail',
			params: {
				id: item.id,
				order_total_price: item.order_total_price
			}
		})
	}
	// 返回
	const leftClick = () => {
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
	// 手机物理返回
	const isShow = ref(true)
	const beforeleave = () => {
		isShow.value = false
		uni.reLaunch({
			url: `/pages/Workbench/index`
		})
	}
	const tabsColumns = reactive([
		{
			name: '全部',
			id: 0
		},
		{
			name: '待审核',
			id: 1
		},
		{
			name: '待出库',
			id: 2
		},
		{
			name: '待签收',
			id: 3
		},
		{
			name: '已完成',
			id: 4
		},
		{
			name: '已取消',
			id: 5
		}
	])
	const data = ref({
		status: 0
	})
	const handleChange = (index) => {
		data.value.status = index.id
		tabsIndex.value = index.index
		paging.value?.reload()
	}
	const tabsIndex = ref(0)
	const statusMap = {
		1: '待审核',
		2: '待出库(已审核)',
		3: '待签收（已出库，配送中）',
		4: '已完成',
		5: '已取消'
	};
</script>

<template>
	<z-paging ref="paging" v-model="dataList" @query="getList" bg-color="rgba(242, 243, 245, 1)">
		<template #top>
			<up-navbar title="退货订单" placeholder @leftClick="leftClick"></up-navbar>
			<view v-if="isShow">
				<page-container :show="isShow" :overlay="false" @beforeleave="beforeleave"></page-container>
			</view>
			<view style="width: 100%;background-color: #fff;">
				<up-tabs :list="tabsColumns" v-model:current="tabsIndex"
					:itemStyle="{ height: '104rpx', fontSize: '28rpx' }" lineWidth="104rpx"
					lineColor="rgba(54, 116, 242, 1)" :scrollable="false" @click="handleChange">
				</up-tabs>
			</view>
		</template>
		<view class="main-box" v-for="(item,index) in dataList" :key="index">
			<view class="main-header">
				<view class="header-name">{{item.store?.store_name}}
				</view>
				<view class="header-right">
					<text class="right-name">{{statusMap[item.status]}}</text>
				</view>
			</view>
			<view @click="toStoreDetail(item)">
				<view class="mian-address">
					<view class="address-name">{{item.no}}</view>
				</view>
				<view class="line"></view>
				<view class="main-jl">经销商：<text style="color: rgba(2, 14, 36, 1);">{{item.dealer?.name}}</text>
				</view>
				<view class="main-jl">金额：<text style="color: rgba(2, 14, 36, 1);">{{item?.order_total_price.toFixed(2)}}</text>
				</view>
				<view class="main-jl">创建时间：<text style="color: rgba(2, 14, 36, 1);">{{item.create_time}}</text>
				</view>
			</view>
			<view class="goods-button" v-if="item.status === 1" @click="cancellation(item.id)">取消订单</view>
		</view>
		<up-notify ref="NotifyRef"></up-notify>
	</z-paging>
</template>

<style scoped lang="scss">
	.main-box {
		width: 702rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 1);
		padding: 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;

		.main-header {
			display: flex;
			justify-content: space-between;

			.header-name {
				font-size: 28rpx;
				font-weight: 700;
				color: rgba(2, 14, 36, 1);
			}

			.header-right {
				display: flex;
				width: auto;
				height: 44rpx;
				border-radius: 4rpx;
				background: rgba(55, 131, 252, 0.1);
				padding: 7rpx 10rpx;
				box-sizing: border-box;

				.right-name {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(55, 131, 252, 1);
				}
			}
		}

		.mian-address {
			display: flex;
			justify-content: space-between;
			margin-top: 20rpx;

			.address-name {
				width: 80%;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(100, 101, 102, 1);
			}

		}

		.line {
			width: 572rpx;
			height: 4rpx;
			margin: 20rpx 0rpx;
			background: linear-gradient(90deg, rgba(55, 131, 252, 1) 0%, rgba(255, 255, 255, 0) 100%);
		}

		.main-jl {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(101, 103, 105, 1);
			margin-bottom: 20rpx;
		}

		.goods-button {
			width: 654rpx;
			height: 80rpx;
			border-radius: 1084rpx;
			background: rgba(242, 243, 245, 1);
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(100, 101, 102, 1);
			text-align: center;
			line-height: 80rpx;
			margin-top: 40rpx;
		}
	}
</style>